<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建管理员账户 - 内容评级平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        neutral: {
                            100: '#F2F3F5',
                            200: '#E5E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
            }
            .form-label {
                @apply block text-sm font-medium text-neutral-700 mb-1;
            }
            .error-message {
                @apply text-danger text-xs mt-1 block;
            }
            .input-icon {
                @apply absolute inset-y-0 left-0 flex items-center pl-4 text-neutral-400 text-xl;
            }
            .password-strength {
                @apply h-1 rounded-full bg-neutral-200 mt-2 overflow-hidden;
            }
            .strength-meter {
                @apply h-full transition-all duration-300;
            }
            .strength-weak {
                @apply bg-danger w-1/4;
            }
            .strength-medium {
                @apply bg-warning w-2/4;
            }
            .strength-strong {
                @apply bg-success w-full;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen font-inter">
<div class="container mx-auto px-4 py-12 md:py-20 max-w-4xl">
    <!-- 页面标题 -->
    <div class="text-center mb-10">
        <h1 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold text-neutral-700 mb-3">内容评级平台</h1>
        <p class="text-neutral-500 max-w-xl mx-auto mt-4">创建新管理员账户</p>
    </div>

    <!-- 主卡片 -->
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="grid md:grid-cols-2">
            <!-- 左侧图片区域 -->
            <div class="hidden md:block bg-gradient-to-br from-primary to-secondary p-8 flex items-center justify-center">
                <div class="text-white text-center">
                    <i class="fa fa-user-plus text-[120px] mb-6 opacity-80"></i>
                    <h3 class="text-2xl font-semibold mb-3">创建管理员</h3>
                    <p class="opacity-90">仅限管理员操作</p>
                    <p class="opacity-80 mt-4 text-sm">创建的账户将拥有完整管理权限</p>
                </div>
            </div>

            <!-- 右侧表单区域 -->
            <div class="p-6 md:p-10">
                <!-- 错误提示 -->
                <% if (request.getAttribute("error") != null) { %>
                <div class="mb-6 p-3 bg-danger/10 text-danger rounded-lg text-sm">
                    <i class="fa fa-exclamation-circle mr-2"></i>
                    <%= request.getAttribute("error") %>
                </div>
                <% } %>

                <!-- 成功提示 -->
                <% if (request.getAttribute("success") != null) { %>
                <div class="mb-6 p-3 bg-success/10 text-success rounded-lg text-sm">
                    <i class="fa fa-check-circle mr-2"></i>
                    <%= request.getAttribute("success") %>
                </div>
                <% } %>

                <!-- 创建管理员表单 -->
                <form id="createAdminForm" action="AdminRegisterServlet" method="post">
                    <!-- 管理员账号 -->
                    <div class="mb-6">
                        <label for="adminUsername" class="form-label">
                            <i class="fa fa-user-circle mr-1"></i>管理员账号
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-user-circle"></i>
                            </span>
                            <input type="text" id="adminUsername" name="adminUsername" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入管理员账号">
                        </div>
                        <div class="error-message" id="adminUsernameError"></div>
                    </div>

                    <!-- 密码 -->
                    <div class="mb-6">
                        <label for="adminPassword" class="form-label">
                            <i class="fa fa-lock mr-1"></i>密码
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="adminPassword" name="adminPassword" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入至少8位包含字母和数字的密码">
                            <button type="button" id="toggleAdminPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-400 hover:text-neutral-600">
                                <i class="fa fa-eye-slash"></i>
                            </button>
                        </div>
                        <div class="password-strength">
                            <div class="strength-meter" id="passwordStrength"></div>
                        </div>
                        <div class="error-message" id="adminPasswordError"></div>
                    </div>

                    <!-- 确认密码 -->
                    <div class="mb-6">
                        <label for="confirmPassword" class="form-label">
                            <i class="fa fa-lock mr-1"></i>确认密码
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input type="password" id="confirmPassword" name="confirmPassword" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请再次输入密码">
                        </div>
                        <div class="error-message" id="confirmPasswordError"></div>
                    </div>

                    <!-- 邮箱 -->
                    <div class="mb-6">
                        <label for="email" class="form-label">
                            <i class="fa fa-envelope mr-1"></i>电子邮箱
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <input type="email" id="email" name="email" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="example@example.com">
                        </div>
                        <div class="error-message" id="emailError"></div>
                    </div>

                    <!-- 安全验证 -->
                    <div class="mb-8">
                        <label for="securityCode" class="form-label">
                            <i class="fa fa-shield mr-1"></i>安全验证
                        </label>
                        <div class="relative">
                            <span class="input-icon">
                                <i class="fa fa-key"></i>
                            </span>
                            <input type="password" id="securityCode" name="securityCode" required
                                   class="pl-12 w-full rounded-lg border border-neutral-300 py-4 px-4 text-neutral-700 form-input-focus"
                                   placeholder="请输入管理员密钥(123456)">
                        </div>
                        <div class="error-message" id="securityCodeError"></div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="flex gap-4">
                        <button type="submit" class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-4 px-4 rounded-lg transition-all duration-200 btn-hover flex items-center justify-center text-lg">
                            <i class="fa fa-user-plus mr-2"></i>
                            创建管理员
                        </button>
                        <button type="button" class="px-6 py-4 rounded-lg border border-neutral-300 hover:bg-neutral-50 transition-colors" onclick="window.history.back()">
                            <i class="fa fa-arrow-left mr-1"></i>返回
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="text-center mt-8 text-neutral-500 text-sm">
        <p>© 2025 大运版权所有</p>
    </div>
</div>

<script>
    // 密码显示/隐藏切换
    document.getElementById('toggleAdminPassword').addEventListener('click', function() {
        const passwordInput = document.getElementById('adminPassword');
        const icon = this.querySelector('i');

        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    });

    // 密码强度检测
    document.getElementById('adminPassword').addEventListener('input', function() {
        const password = this.value;
        const strengthMeter = document.getElementById('passwordStrength');

        // 重置样式
        strengthMeter.className = 'strength-meter';

        if (password.length === 0) {
            return;
        }

        // 计算密码强度
        let strength = 0;

        // 长度评分
        strength += Math.min(password.length * 5, 25);

        // 包含小写字母
        if (/[a-z]/.test(password)) strength += 10;

        // 包含大写字母
        if (/[A-Z]/.test(password)) strength += 10;

        // 包含数字
        if (/[0-9]/.test(password)) strength += 10;

        // 包含特殊字符
        if (/[^a-zA-Z0-9]/.test(password)) strength += 10;

        // 重复字符扣分
        if (/(.)\1/.test(password)) strength -= 5;

        // 确保在0-100范围内
        strength = Math.max(0, Math.min(strength, 100));

        // 更新强度条
        if (strength < 30) {
            strengthMeter.classList.add('strength-weak');
        } else if (strength < 70) {
            strengthMeter.classList.add('strength-medium');
        } else {
            strengthMeter.classList.add('strength-strong');
        }
    });

    // 表单验证
    document.getElementById('createAdminForm').addEventListener('submit', function(e) {
        let isValid = true;

        // 验证用户名
        const username = document.getElementById('adminUsername');
        const usernameRegex = /^[a-zA-Z0-9_]{4,20}$/;
        if (username.value.trim() === '') {
            document.getElementById('adminUsernameError').textContent = '请输入管理员账号';
            document.getElementById('adminUsernameError').style.display = 'block';
            isValid = false;
        } else if (!usernameRegex.test(username.value)) {
            document.getElementById('adminUsernameError').textContent = '用户名必须为4-20位的字母、数字或下划线';
            document.getElementById('adminUsernameError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('adminUsernameError').style.display = 'none';
        }

        // 验证密码
        const password = document.getElementById('adminPassword');
        const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
        if (password.value.trim() === '') {
            document.getElementById('adminPasswordError').textContent = '请输入密码';
            document.getElementById('adminPasswordError').style.display = 'block';
            isValid = false;
        } else if (!passwordRegex.test(password.value)) {
            document.getElementById('adminPasswordError').textContent = '密码必须包含大小写字母和数字，长度至少8位';
            document.getElementById('adminPasswordError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('adminPasswordError').style.display = 'none';
        }

        // 验证确认密码
        const confirmPassword = document.getElementById('confirmPassword');
        if (confirmPassword.value.trim() === '') {
            document.getElementById('confirmPasswordError').textContent = '请再次输入密码';
            document.getElementById('confirmPasswordError').style.display = 'block';
            isValid = false;
        } else if (confirmPassword.value !== password.value) {
            document.getElementById('confirmPasswordError').textContent = '两次输入的密码不一致';
            document.getElementById('confirmPasswordError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('confirmPasswordError').style.display = 'none';
        }

        // 验证邮箱
        const email = document.getElementById('email');
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (email.value.trim() === '') {
            document.getElementById('emailError').textContent = '请输入邮箱地址';
            document.getElementById('emailError').style.display = 'block';
            isValid = false;
        } else if (!emailRegex.test(email.value)) {
            document.getElementById('emailError').textContent = '请输入有效的邮箱地址';
            document.getElementById('emailError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('emailError').style.display = 'none';
        }

        // 验证安全码
        const securityCode = document.getElementById('securityCode');
        if (securityCode.value.trim() === '') {
            document.getElementById('securityCodeError').textContent = '请输入管理员密钥';
            document.getElementById('securityCodeError').style.display = 'block';
            isValid = false;
        } else if (securityCode.value !== '123456') {
            document.getElementById('securityCodeError').textContent = '管理员密钥不正确';
            document.getElementById('securityCodeError').style.display = 'block';
            isValid = false;
        } else {
            document.getElementById('securityCodeError').style.display = 'none';
        }

        if (!isValid) {
            e.preventDefault();
        }
    });
</script>
</body>
</html>